<template>
  <div
    :class="{
      'web-container': deviceType == 'web',
      'mobile-container': deviceType == 'mobile',
      'ipad-container': deviceType == 'ipad',
    }"
  >
    <div class="indexBanner">
      <el-image
        style="width: 100%; height: 100%"
        :src="bannerUrl"
        fit="cover"
      ></el-image>
    </div>

    <!-- 版心 -->
    <div class="pageArea">
      <!-- 姓氏简介 -->
      <div class="section">
        <div class="section_content">
          <div class="IntroductionBox">
            <div class="BoxItem">
              <div
                class="message"
                v-if="deviceType == 'web' || deviceType == 'ipad'"
              >
                <div class="name">{{ optionsParamsName }}</div>
                <div class="pageH4" v-html="dialogObj.oo_intro"></div>
                <div class="nameImg">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="dialogObj.oo_totems"
                    fit="cover"
                  ></el-image>
                </div>
              </div>
              <div class="message" v-if="deviceType == 'mobile'">
                <div class="top">
                  <div class="name">{{ optionsParamsName }}</div>
                  <div class="nameImg">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="dialogObj.oo_totems"
                      fit="cover"
                    ></el-image>
                  </div>
                </div>
                <div class="bottom">
                  <div class="pageH4" v-html="dialogObj.oo_intro"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第二部分 -->
      <div class="section">
        <div class="section_content">
          <!--轮播 -->
          <div class="swiper-container-news">
            <swiper :options="swiperoptionSlides" ref="mySwiperNews">
              <swiper-slide
                v-for="(newsItem, newsIndex) in slides"
                :key="newsIndex"
              >
                <div class="newsItem" @click="selectNew(newsItem, newsIndex)">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="newsItem.swiperUrl"
                    fit="fill"
                  >
                  </el-image>
                  <div class="mesg">
                    <div class="cardTitle">{{ newsItem.title }}</div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div
              class="nextPrev"
              v-if="deviceType == 'web' || deviceType == 'ipad'"
            >
              <div
                class="swiper-button-prev swiper-button-prev-slides"
                slot="button-prev"
              ></div>
              <div
                class="swiper-button-next swiper-button-next-slides"
                slot="button-next"
              ></div>
            </div>
          </div>
        </div>
        <el-dialog
          :visible.sync="dialogVisible"
          width="100%"
          :fullscreen="fullscreen"
          :before-close="handleClose"
        >
          <el-scrollbar ref="scrollbar" style="height: 90vh">
            <div class="dialog_content" v-html="dialogContent"></div>
          </el-scrollbar>
          <button class="go-top-button" v-if="showGoTop" @click="scrollToTop">
            up
          </button>
        </el-dialog>
      </div>

      <!-- 傑出華人 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">傑出華人</div>
          <div class="more">查看全部 ></div>
        </div>
        <div class="section_content">
          <div class="swiper-container-historyBox">
            <swiper :options="swiperoptionChinese" ref="mySwiperChinese">
              <swiper-slide v-for="(item, index) in historyList" :key="index">
                <div class="historyItem">
                  <div class="topImg">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item.historyUrl"
                      fit="cover"
                    ></el-image>
                  </div>
                  <div class="name">
                    {{ item.historyName }}
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div
              class="nextPrev"
              v-if="deviceType == 'web' || deviceType == 'ipad'"
            >
              <div
                class="swiper-button-prev swiper-button-prev-chinese"
                slot="button-prev"
              ></div>
              <div
                class="swiper-button-next swiper-button-next-chinese"
                slot="button-next"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 歷史名人 -->
      <div class="section">
        <div class="section_title">
          <div class="pageH1">歷史名人</div>
          <div class="more">查看全部 ></div>
        </div>
        <div class="section_content">
          <div class="swiper-container-historyBox">
            <swiper :options="swiperoptionHistory" ref="mySwiperHistory">
              <swiper-slide v-for="(item, index) in historyList" :key="index">
                <div class="historyItem">
                  <div class="topImg">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item.historyUrl"
                      fit="cover"
                    ></el-image>
                  </div>
                  <div class="name">
                    {{ item.historyName }}
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div
              class="nextPrev"
              v-if="deviceType == 'web' || deviceType == 'ipad'"
            >
              <div
                class="swiper-button-prev swiper-button-prev-history"
                slot="button-prev"
              ></div>
              <div
                class="swiper-button-next swiper-button-next-history"
                slot="button-next"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { test } from "@/api/test";
export default {
  name: "searchPage",
  data() {
    return {
      dialogVisible: false,
      dialogContent: "",
      fullscreen: true,
      // 顶部信息
      dialogObj: {},
      bannerUrl: require("@/assets/images/family/nameBanner.png"), //banner
      // 卡片展示轮播
      slides: [
        {
          swiperUrl: require("@/assets/images/family/search/name_01.png"),
          title: "姓氏由来",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/family/search/name_02.png"),
          title: "姓氏衍生",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/family/search/name_03.png"),
          title: "遷徙分布",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/family/search/name_04.png"),
          title: "郡望堂号",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/family/search/name_01.png"),
          title: "楹联典故",
          time: "2024.05.23",
        },
        {
          swiperUrl: require("@/assets/images/family/search/name_02.png"),
          title: "家风家训",
          time: "2024.05.23",
        },
      ],
      swiperoptionSlides: {
        slidesPerView: 4,
        spaceBetween: 16,
        mousewheelControl: true,
        navigation: {
          nextEl: ".swiper-button-next-slides",
          prevEl: ".swiper-button-prev-slides",
        },
        mousewheelControl: true,
      },

      // 历史名人 & 杰出华人公用一个list 等待 接口

      historyList: [
        {
          historyUrl: require("@/assets/images/family/history_01.png"),
          historyName: "納訓",
        },
        {
          historyUrl: require("@/assets/images/family/history_02.png"),
          historyName: "羋八子",
        },
        {
          historyUrl: require("@/assets/images/family/history_03.png"),
          historyName: "列子",
        },
        {
          historyUrl: require("@/assets/images/family/history_03.png"),
          historyName: "狼瞫",
        },
        {
          historyUrl: require("@/assets/images/family/history_01.png"),
          historyName: "納訓",
        },
        {
          historyUrl: require("@/assets/images/family/history_02.png"),
          historyName: "羋八子",
        },
        {
          historyUrl: require("@/assets/images/family/history_03.png"),
          historyName: "列子",
        },
        {
          historyUrl: require("@/assets/images/family/history_03.png"),
          historyName: "狼瞫",
        },
      ],

      // 杰出华人
      swiperoptionChinese: {
        slidesPerView: 4,
        spaceBetween: 16,
        mousewheelControl: true,
        navigation: {
          nextEl: ".swiper-button-next-chinese",
          prevEl: ".swiper-button-prev-chinese",
        },
        mousewheelControl: true,
      },
      // 历史名人
      swiperoptionHistory: {
        slidesPerView: 4,
        spaceBetween: 16,
        mousewheelControl: true,
        navigation: {
          nextEl: ".swiper-button-next-history",
          prevEl: ".swiper-button-prev-history",
        },
        mousewheelControl: true,
      },
      optionsParamsId: null,
      optionsParamsName: null,
    };
  },
  created() {
    this.checkSwiper();
    this.getOptions();
  },
  watch: {
    $route(to, from) {
      this.getOptions(); // 路由变化时重新获取数据
    },
  },
  methods: {
    getOptions() {
      this.optionsParamsId = this.$route.query.ssId;
      this.optionsParamsName = this.$route.query.ssName;
      if (this.optionsParamsId) {
        test(this.optionsParamsId).then((res) => {
          this.dialogObj = res.data;
        });
      }
    },

    selectNew(newsItem, newsIndex) {
      this.dialogVisible = true;
      if (newsIndex == 0) {
        this.dialogContent = this.dialogObj.oo_origin;
      } else if (newsIndex == 1) {
        this.dialogContent = this.dialogObj.oo_derivat;
      } else if (newsIndex == 2) {
        this.dialogContent = this.dialogObj.oo_migrate;
      } else if (newsIndex == 3) {
        this.dialogContent = this.dialogObj.oo_jwth;
      } else if (newsIndex == 4) {
        this.dialogContent = this.dialogObj.oo_allusions;
      } else {
        this.dialogContent = this.dialogObj.oo_distribution;
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    checkSwiper() {
      if (this.deviceType == "web" || this.deviceType == "ipad") {
        this.swiperoptionHistory.slidesPerView = 4;
        this.swiperoptionSlides.slidesPerView = 4;
        this.swiperoptionChinese.slidesPerView = 4;
      } else {
        this.swiperoptionHistory.slidesPerView = 2.5;
        this.swiperoptionSlides.slidesPerView = 2.5;
        this.swiperoptionChinese.slidesPerView = 2.5;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/viewCss/family/search/searchPage.scss";
</style>